/*
 * @Author       : liumour @3d3-Studio
 * @Date         : 2021-02-02 10:37:28
 * @LastEditTime : 2021-03-02 22:39:58
 * @----------------------------------
 * @FilePath     : \Pro_Ui\src\pages\profile\[profile_id].js
 * @Description  : 
 */
// 导入基础库
import { connect, history } from 'umi';
// 导入配置参数
import df from '../../../config/dataFormat';
// 导入处理函数
import com from '../../utils/common';
import { getJSON } from '../../utils/request';
import moment from 'moment';
// 导入UI组件
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Row, Col, Image, Space, Modal, Form, Input, Upload, AutoComplete, DatePicker } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
// 导入LESS样式
import styles from './profile_id.less';

const { confirm } = Modal;
const { TextArea } = Input;
const { Dragger } = Upload;

const PageView = (props) => {
  // 初始化参数------------------------------------------------
  const {table:tb, socketio: io, dispatch: dp } = props;
  var profile = Object.assign({}, io.profile)
  profile['来玉时间'] = profile['来玉时间'] ? moment(profile['来玉时间'], 'YYYY-MM-DD') : null
  profile['离玉时间'] = profile['离玉时间'] ? moment(profile['离玉时间'], 'YYYY-MM-DD') : null
  profile['管控时间'] = profile['管控时间'] ? moment(profile['管控时间'], 'YYYY-MM-DD') : null

  const [form] = Form.useForm();
  form.setFieldsValue(profile)

  const update = async () => {
    var x = await getJSON(process.env.postUrl + '/api/imgs/' + io.profile._id);
    dp({type:'socketio/save',payload:{profile_imgs:x}})
  };


  // 渲染UI组件------------------------------------------------
  return (
    <PageContainer
      fixedHeader
      affixProps={{ offsetTop: 48 }}
      title="档案详情"
      extra={[
        <Button key="4" onClick={() => {
          dp({ type: 'socketio/save', payload: { profile: {} } })
          history.goBack()
        }}>
          返回上一页
        </Button>,
        // <Button key="3" onClick={() => com.print(window)}>
        //   打印
        // </Button>,
        <Button key="2" onClick={() => {
          confirm({
            title: '询问?',
            content: '是否要删除档案?',
            onOk() {
              dp({ type: 'socketio/emit', payload: { type: "remove_file", data: [profile._id] } })
              history.goBack()
            }
          });
        }}>删除档案</Button>,
        <Button
          key="1"
          type="primary"
          onClick={() => {
            // history.push(`/manage/edit/${profile._id}`)
            form.submit()
          }}
        >
          保存修改
        </Button>,
      ]}
      content={[
        <Row key="1">
          <Col span={24}><span>档案编号：{profile['编号']}</span></Col>
          <Col span={24}><span>录入时间：{profile['录入时间']}</span></Col>
        </Row>
      ]}
    >
      <Row gutter={24}>
        <Col span={17}>
          <Form
            form={form}
            name="basic"
            size="small"
            // initialValues={profile}
            // layout="vertical"
            onFinish={(e) => {

              var val = { ...profile, ...e };
              val['离玉时间'] = val['离玉时间'] ? moment(val['离玉时间']).format('YYYY-MM-DD') : undefined
              val['来玉时间'] = val['来玉时间'] ? moment(val['来玉时间']).format('YYYY-MM-DD') : undefined
              val['操作记录'] = `${com.get_format_date()} ${tb.user.user} 最后修改；${val['操作记录']
                }`;
              dp({
                type: 'socketio/emit',
                payload: { type: 'edit_profile', data: val },
              });
            }}
          >
            <Row gutter={24}>
              <Col span={6}>
                <Form.Item
                  label="辖区"
                  name="辖区"
                >
                  <AutoComplete
                    className={styles.input}
                    bordered={false}
                    options={df.manage_op}
                    filterOption={(inputValue, option) =>
                      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="姓名"
                  name="姓名"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="性别"
                  name="性别"
                >
                  <AutoComplete
                    className={styles.input}
                    bordered={false}
                    options={[{ value: "男" }, { value: '女' }]}
                    filterOption={(inputValue, option) =>
                      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="职业"
                  name="职业"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>




              <Col span={6}>
                <Form.Item
                  label="身份证号"
                  name="身份证号"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item
                  label="电话号码"
                  name="电话号码"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>

              <Col span={6}>
                <Form.Item
                  label="健康状态"
                  name="健康状态"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item
                  label="户籍地址"
                  name="户籍地址"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="实际居住地"
                  name="实际居住地"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>

              <Col span={6}>
                <Form.Item
                  label="是否到达玉林"
                  name="是否到达玉林"
                >
                  <AutoComplete
                    className={styles.input}
                    bordered={false}
                    options={[{ value: "待核查" }, { value: '来玉途中' }, { value: '已到达玉林' }]}
                    filterOption={(inputValue, option) =>
                      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="来玉时间"
                  name="来玉时间"
                >
                  <DatePicker allowClear={false} style={{ width: "100%" }} className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="离玉时间"
                  name="离玉时间"
                >
                  <DatePicker allowClear={false} style={{ width: "100%" }} className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="本市人员/市外人员"
                  name="本市人员/市外人员"
                >
                  <AutoComplete
                    className={styles.input}
                    bordered={false}
                    options={[{ value: "待核查" }, { value: '本市人员' }, { value: '外市人员' }]}
                    filterOption={(inputValue, option) =>
                      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                    }
                  />
                </Form.Item>
              </Col>


              <Col span={6}>
                <Form.Item
                  label="来自何地"
                  name="来自何地"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="扫码情况"
                  name="扫码情况"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="人员轨迹"
                  name="人员轨迹"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>

              <Col span={12}>
                <Form.Item
                  label="是否做过核酸检测"
                  name="是否做过核酸检测"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="最新一次核酸检测日期、结果"
                  name="最新一次核酸检测日期、结果"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="是否感染过新冠肺炎病毒"
                  name="是否感染过新冠肺炎病毒"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="措施"
                  name="措施"
                >
                  <Input className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="是否下发乡镇跟进"
                  name="是否下发乡镇跟进"
                >
                  <AutoComplete
                    className={styles.input}
                    bordered={false}
                    options={[{ value: "待处理" }, { value: '已发乡镇跟进' }]}
                    filterOption={(inputValue, option) =>
                      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="管控状态"
                  name="管控状态"
                >
                  <AutoComplete
                    className={styles.input}
                    bordered={false}
                    options={[{ value: "待核查" }, { value: '管控中' }, { value: '已过管控期' }]}
                    filterOption={(inputValue, option) =>
                      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                    }
                  />
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item
                  label="管控时间"
                  name="管控时间"
                >
                  <DatePicker allowClear={false} style={{ width: "100%" }} className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="核查情况"
                  name="核查情况"
                >
                  <TextArea autoSize className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="备注"
                  name="备注"
                >
                  <TextArea autoSize className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="数据来源"
                  name="数据来源"
                >
                  <TextArea autoSize className={styles.input} />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Col>
        <Col span={7}>
          <div>
            <Dragger
              className={styles.upbox}
              name={io.profile._id}
              action={`${process.env.postUrl}/api/upload`}
              maxCount={1}
              showUploadList={false}
              beforeUpload={(file) => {
                return new Promise((resolve, reject) => {
                  const reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onload = () => {
                    const img = document.createElement('img');
                    img.src = reader.result;
                    img.onload = () => {
                      const {
                        naturalWidth: originWidth,
                        naturalHeight: originHeight,
                      } = img;
                      const maxWidth = 800,
                      maxHeight = 800;

                      let targetWidth = originWidth,
                        targetHeight = originHeight;
                      // 等比例计算超过最大限制时缩放后的图片尺寸
                      if (originWidth > maxWidth || originHeight > maxHeight) {
                        if (originWidth / originHeight > 1) {
                          // 宽图片
                          targetWidth = maxWidth;
                          targetHeight = Math.round(
                            maxWidth * (originHeight / originWidth),
                          );
                        } else {
                          // 高图片
                          targetHeight = maxHeight;
                          targetWidth = Math.round(
                            maxHeight * (originWidth / originHeight),
                          );
                        }
                      }
                      const canvas = document.createElement('canvas');
                      canvas.width = targetWidth;
                      canvas.height = targetHeight;
                      const ctx = canvas.getContext('2d');
                      ctx.clearRect(0, 0, targetWidth, targetHeight);
                      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
                      canvas.toBlob(resolve);
                    };
                  };
                })

              }}

              onChange={async ({ file }) => {
                let status = file.response;
                if (status) {
                  if (status.status === 200) {
                    com.msg(status.msg.type, status.msg.msg);
                    update();
                  }
                }
              }}
            >
              <p className="ant-upload-drag-icon">
                <PlusOutlined />
              </p>
              <p className="ant-upload-text">点击或拖入上传图片档案</p>
            </Dragger>
          </div>
          <div style={{ marginTop: 20 }}>
            <Image.PreviewGroup>
              <Space size={[10, 10]} wrap>
                {io.profile_imgs.map((file, id) => (
                  <div key={id} style={{ position: 'relative' }}>
                    <div
                      className={styles.delet}
                      onClick={() => {
                        confirm({
                          title: '询问?',
                          content: '是否要删除该图片档案',
                          onOk() {
                            dp({
                              type: 'socketio/emit',
                              payload: { type: 'remove_img', data: file },
                            });
                            update()
                          },
                        });
                      }}
                    >
                      X
                </div>
                    <Image
                      width={200}
                      src={`${process.env.postUrl}/imgs/${file.filename}`}
                    />
                  </div>
                ))}
              </Space>
            </Image.PreviewGroup>
          </div>
        </Col>
      </Row>
    </PageContainer>

  );
};

export default connect(({ table,socketio }) => ({ table,socketio }))(
  PageView,
);
